/*
  用法：
    <yl-dialog isShow="{{isShow}}" message="内容"></yl-dialog>
  Props
    is-show               是否展示
    close-click-overlay   是否在点击遮罩层后关闭
    title                 标题
    message               文本
    show-cancel-button    是否展示取消按钮
    show-confirm-button   是否展示确定按钮
    textalign             文字方向  right left  center
    overlay               是否展示遮罩层
  Events
    cancel    取消
    confirm   确定
  Slot
    title         自定义title显示内容
    默认slot       自定义内容
    button        自定义button
*/
Component({
  options: {
    multipleSlots: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    // 是否展示
    isShow: {
      type: Boolean,
      value: false,
    },
    // 是否在点击遮罩层后关闭
    closeClickOverlay: {
      type: Boolean,
      value: true,
    },
    // 标题
    title: {
      type: String,
      value: "标题文案",
    },
    // 文本内容
    message: {
      type: String,
      value: "",
    },
    // 是否展示取消按钮
    showCancelButton: {
      type: Boolean,
      value: true,
    },
    // 是否展示确认按钮
    showConfirmButton: {
      type: Boolean,
      value: true,
    },
    /*
      文字方向，默认center
      right
      left
      center
    */
    textalign: {
      type: String,
      value: "center",
    },
    // 是否显示遮罩层,默认true
    overlay: {
      type: Boolean,
      value: true,
    },
    confirmText: {
      type: String,
      value: "确定",
    },
    cancelText: {
      type: String,
      value: "取消",
    },
  },

  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {
    clickOverlay() {
      // 关闭
      this.triggerEvent("clickOverlay", this);
    },
    // 取消
    cancelClick() {
      this.setData({
        isShow: false,
      });
      this.triggerEvent("cancel", this);
    },
    // 确定
    confirmClick() {
      // this.setData({
      //   isShow: false,
      // });
      this.triggerEvent("confirm", this);
    },
  },
});
